<template>
  <div class="app-cont">
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--这是 Header 区域 -->
    <!--<div class="header">-->
      <!--<headers title="我的"></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="myHomeFX">
            <div class="top">
              <div class="tTop">
                <div class="left">
                  <img :src="userInfo.headImg" @click="invitation">
                  <div>
                    <p>{{userInfo.nickName}}</p>
                    <button class="btn1" @click="baiyin()">白银会员</button>
                    <button class="btn2" @click="huifei()">
                      续缴会费&nbsp;&nbsp;&gt;
                    </button>
                  </div>
                </div>
                <div class="right">
                  <router-link to="/Messages" class="right">
                    <img src="../assets/images/ios/ico_xiaoxi@1x.png" alt="">
                    <b v-if="myList.gpCount!==0">{{myList.gpCount}}</b>
                  </router-link>

                  <!--退出应用，到微信对话窗口-->
                  <a href="javascript:WeixinJSBridge.call('closeWindow');">
                    <button class="off" @click="off()">退出登录</button>
                  </a>
                </div>

              </div>
              <ul>
                <li>
                  <p>{{myList.totalFee}}</p>
                  <span>收入金额</span>
                </li>
                <!--<li>-->
                <!--<p>350</p>-->
                <!--<span>会员积分</span>-->
                <!--</li>-->
                <li>
                  <router-link to="/team" class="p2">
                    <p>{{myList.myTeamNum}}</p>
                    <span>我的团队</span>
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="myOrder">
             <!-- <router-link to="/teamOrder">-->
                <mt-cell
                  title="我的团单">
                </mt-cell>
            <!--  </router-link>-->
              <ul>
                <router-link to="/teamOrdering">
                  <li>
                    <img src="../assets/images/ios/pdzhong@1x.png" alt="">
                    <p>拼单中</p>
                    <b v-if="myList.gpCount!==0">{{myList.gpCount}}</b>
                  </li>
                </router-link>
                <router-link to="/teamOrdersuccess">
                  <li>
                    <img src="../assets/images/ios/yifahuo@1x.png" alt="">
                    <p>拼单成功</p>
                    <b v-if="myList.gpSuccessCount!==0">{{myList.gpSuccessCount}}</b>
                  </li>
                </router-link>
                <router-link to="/teamOrderReturn">
                  <li>
                    <img src="../assets/images/ios/tuikuan@1x.png" alt="">
                    <p>退款/售后</p>
                    <b v-if="myList.gpRefundCount!==0">{{myList.gpRefundCount}}</b>
                  </li>
                </router-link>
              </ul>
            </div>
            <div class="pinOrder">
              <!-- <router-link to="/myOrderAll">-->
              <mt-cell
                title="我的订单"
              >
              </mt-cell>
              <!-- </router-link>-->
              <ul>
                <router-link to="/myOrderIng">
                  <li>
                    <img src="../assets/images/ios/pdzhong@1x.png" alt="">
                    <p>拼单中</p>
                    <b v-if="myList.orderCount!==0">{{myList.orderCount}}</b>
                  </li>
                </router-link>
                <router-link to="/myOrderWaiting">
                  <li>
                    <img src="../assets/images/ios/yifahuo@1x.png" alt="">
                    <p>待发货</p>
                    <b v-if="myList.orderWaitCount!==0">{{myList.orderWaitCount}}</b>
                  </li>
                </router-link>
                <router-link to="/myOrderAlready">
                  <li>
                    <img src="../assets/images/ios/daifahuo@1x.png" alt="">
                    <p>已发货</p>
                    <b v-if="myList.orderAlreadyCount!==0">{{myList.orderAlreadyCount}}</b>
                  </li>
                </router-link>
                <router-link to="/myOrderReturn">
                  <li>
                    <img src="../assets/images/ios/tuikuan@1x.png" alt="">
                    <p>退款/售后</p>
                    <b v-if="myList.orderRefundCount!==0">{{myList.orderRefundCount}}</b>
                  </li>
                </router-link>
              </ul>
            </div>
            <div class="shopManage">
              <mt-cell title="店铺管理"></mt-cell>
              <ul>
                <router-link to="/Management">
                  <li>
                    <img src="../assets/images/ios/ico_goodsManage@1x.png" alt="">
                    <p>商品管理</p>
                  </li>
                </router-link>
                <router-link to="/sales">
                  <li>
                    <img src="../assets/images/ios/ico_yeJi@1x.png" alt="">
                    <p>销售业绩</p>
                  </li>
                </router-link>
                <div @click="promote()">
                  <li>
                    <img src="../assets/images/ios/ico_tuiGuang@1x.png" alt="">
                    <p>我要推广</p>
                  </li>
                </div>
              </ul>
            </div>
            <div class="bottom">
              <mt-cell title="收货地址" to="./addressManage" is-link>
                <img slot="icon" src="../assets/images/ios/ico_add@1x.png" width="24" height="24">
              </mt-cell>
              <mt-cell title="帮助" to="./help" is-link>
                <img slot="icon" src="../assets/images/ios/ico_help@1x.png" width="24" height="24">
              </mt-cell>
              <div class="fenge"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部的 Tabbar 区域 -->
    <div class="footer">
      <mt-tabbar class="tabbar">
        <mt-tab-item id="tab1">
          <img slot="icon" src="./../assets/images/ico_home_1@1x.png" @click="disTrueHome">
          首页
        </mt-tab-item>
        <mt-tab-item id="tab2">
          <img slot="icon" src="./../assets/images/ico_fenlei_1@1x.png" @click="toMemberContainer">
          分类
        </mt-tab-item>
        <mt-tab-item id="tab3">
          <img slot="icon" src="./../assets/images/ico_dianpu_1@1x.png" @click="toShops">
          店铺
        </mt-tab-item>
        <mt-tab-item id="tab4" class="listNow">
          <img slot="icon" src="./../assets/images/ico_wode_2@1x.png" @click="tomyHomeFX">
          我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
    <loading v-show="showLoading "></loading>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
import {relogin} from "../components/httpUtil/httpUtil";

export default {
    name: 'myHomeFX',
    data() {
      return {
        myList: '',
        userInfo: {},
        showLoading: true, //显示加载动画
        showAlert:false,
        alertText:null
//        userInformation: ''
      }
    },
    methods: {
      off () {
        localStorage.clear();
      },
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go() {
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading() {
        this.showLoading = false;
      },
      fn10043() {
        const jsonValue = JSON.stringify({
          'c': '10043',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,
            'tokenId': token()
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
            this.hideLoading();
            this.myList = res.data.p
            this.userInfo = res.data.p.userInfo;
          }
          else {
            this.hideLoading();
            this.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorCode === 90) {
              this.go = ()=> {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }

          }
        }, (res) => {
          this.hideLoading();
          this.alertTip("网络错误");
          this.go = function(){
             this.showAlert = false;
          }
        })
      },
      baiyin() {
        this.alertTip("白银会员");
        this.go = function(){
           this.showAlert = false;
        }
        // alert('白银会员')
      },
      huifei() {
        this.alertTip("续缴会费");
        this.go = function(){
           this.showAlert = false;
        }
      },
      disTrueHome() {
        console.log(1)
        this.$router.push({name: 'disTrueHome'})
      },
      toMemberContainer() {
        this.$router.push({name: 'MemberContainer'})
      },
      toShops() {
        console.log(JSON.parse(window.localStorage.loginP).hasOwnProperty('shop'));
        if (JSON.parse(window.localStorage.loginP).hasOwnProperty('shop')) {
          localStorage.setItem('shopId', JSON.parse(window.localStorage.loginP).shop.id);
          this.$router.push({name: 'Shops'})
        } else {
          this.$router.push({name: 'NewShop'});
        }
      },
      tomyHomeFX() {
        this.$router.push({name: 'myHomeFX'})
      },
      invitation() {
        window.localStorage.zhezhao1=false
        window.localStorage.zzc1=false
        window.localStorage.data = JSON.stringify(this.userInfo);
        window.localStorage.shopUrl = this.myList.shopUrl;
        this.$router.push({name: 'Invitation', params: {}})

      },
      promote(){
        this.$router.push("/Invitation")
        window.localStorage.zhezhao1=true
        window.localStorage.zzc1=true
      }
    },
    created() {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },1)
      window.localStorage.historyUrl = window.location.href;
      console.log(window.localStorage.historyUrl)
      this.fn10043();
//      this.fn10021();
//      let number = localStorage.getItem("tlp")
//      console.log(this.$route.params.userInfo);
//      if (this.$route.params.userInfo !== undefined) {
//        this.userInformation = this.$route.params.userInfo;
////        console.log('22222222')
//      } else {
//        this.userInformation = JSON.parse(window.localStorage.data)
//      }
    }
  }
</script>

<style scoped lang="scss">
  .fenge{
    width: 100%;
    height: 20px;
    background: #f4f4f4;
  }
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0 94px;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      /*flex: 1;*/
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .tabbar {
    position: fixed;
    /*flex: 1;*/
    box-sizing: border-box;
    height: 94px;
    border-top: 1px solid #f3f3f3;
    color: #898d93;
    .listNow {
      color: red;
    }
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
  }

  .myHomeFX {
    height: 100%;
    background: #f4f4f4;
    padding-bottom: 20px;
  }

  /*头部信息*/
  .myHomeFX .top {
    height: 388px;
    margin: -21px 0 20px;
    background: #ffffff;
  }

  .myHomeFX .top .tTop {
    height: 233px;
    background: url("../assets/images/ios/bg@1x.png") 0 -4px no-repeat;
    background-size: 100% 233px;
    margin-bottom: 20px;
  }

  .myHomeFX .top .tTop .left {
    margin: 69px 0 0 42px;
  }

  .myHomeFX .top .tTop .left img {
    width: 112px;
    height: 112px;
    /*margin-right: 24px;*/
    border-radius: 50%;
  }

  .myHomeFX .top .tTop .left div {
    display: inline;
    float: right;
    color: #fff;
    margin-left: 24px;
  }

  .myHomeFX .top .tTop .left div p {
    font-size: 28px;
    margin-bottom: 23px;
  }

  .myHomeFX .top .tTop .left div button {
    height: 38px;
    font-size: 20px;
    border: none;
    outline: none;
    border-radius: 30px;
    color: #fff;
    line-height: 38px;
  }

  .myHomeFX .top .tTop .left div .btn1 {
    width: 110px;
    background: url("../assets/images/ios/bg_白金会员@1x.png") no-repeat;
    background-size: 100%;
  }

  .myHomeFX .top .tTop .left div .btn2 {
    width: 128px;
    background: url("../assets/images/ios/bg_xujiao@1x.png") no-repeat;
    background-size: 100%;
    margin-left: 12px;
  }

  .myHomeFX .top .tTop .left div .btn2 .a {
    margin-left: 5px;
    color: #fff;
  }

  .myHomeFX .top .tTop .off{
    width: 110px;
    height: 38px;
    border: none;
    border-radius: 30px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    float: right;
    margin: 25px 25px 0 0;
    outline: none;
    background: #ccc;
    background-size: cover;
  }

  .myHomeFX .top .tTop .right {
    width: 110px;
    position: relative;
  }

  .myHomeFX .top .tTop .right img {
    width: 40px;
    height: 38px;
    margin: 59px 50px 0 0;
  }

  .myHomeFX .top .tTop .right b {
    width: 38px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    background: url("../assets/images/ios/bg_xiaoxi@1x.png") no-repeat;
    background-size: 100%;
    color: #fe3519;
    font-size: 20px;
    position: absolute;
    top: 45px;
    right: 40px;
  }

  .myHomeFX .top ul {
    width: 100%;
    margin-left: 15px;
  }

  .myHomeFX .top ul li {
    float: left;
    width: 48%;
    text-align: center;
  }

  .myHomeFX .top ul li p {
    font-family: '中黑体';
    font-size: 42px;
    color: #fe3519;
    margin-bottom: 20px;
  }

  .myHomeFX .top ul li span {
    font-size: 20px;
    color: #a1a1a1;
  }

  .myHomeFX .top ul li:nth-child(2) {
    border-left: 1px solid #ededed;
    /*border-right: 1px solid #ededed;*/
  }

  /*我的团单*/
  .myOrder {
    margin-bottom: 20px;
  }

  .myOrder ul {
    height: 142px;
    text-align: center;
    background: #ffffff;
  }

  .myOrder ul li {
    float: left;
    width: 33%;
    margin-top: 25px;
    position: relative;
  }

  .myOrder ul li p {
    font-size: 20px;
    color: #3b3b43;
  }

  .myOrder ul li img {
    width: 48px;
    height: 45px;
    margin-bottom: 10px;
  }

  .myOrder ul li b {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #ffffff;
    background: url("../assets/images/ios/ico_pindan@1x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: -15px;
    right: 25%;
  }

  /*我的订单*/
  .pinOrder {
    margin-bottom: 20px;
  }

  .pinOrder ul {
    height: 142px;
    text-align: center;
    background: #ffffff;
  }

  .pinOrder ul li {
    float: left;
    width: 24%;
    margin-top: 25px;
    position: relative;
  }

  .pinOrder ul li p {
    font-size: 20px;
    color: #3b3b43;
  }

  .pinOrder ul li img {
    width: 48px;
    height: 45px;
    margin-bottom: 10px;
  }

  .pinOrder ul li b {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #ffffff;
    background: url("../assets/images/ios/ico_pindan@1x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    top: -15px;
    right: 25px;
  }

  /*店铺管理*/
  .shopManage {
    margin-bottom: 20px;
  }

  .shopManage .mint-cell {
    height: 70px;
    border-bottom: 1px solid #f4f4f4;
  }

  .shopManage ul {
    height: 190px;
    background: #ffffff;
    text-align: center;
  }

  .shopManage ul li {
    float: left;
    width: 213px;
    margin-top: 36px;
  }

  .shopManage ul li img {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
  }

  .shopManage ul li p {
    font-size: 24px;
    color: #3b3b43;
  }
</style>
<style>
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }

  .myHomeFX .mint-cell-title {
    padding-left: 15px;
    font-size: 24px;
    color: #000;
  }

  .shopManage .mint-cell-title {
    padding-left: 15px;
    font-size: 24px;
    color: #000;
  }

  /*我的订单*/
  .myOrder .mint-cell {
    height: 70px;
    /*border-bottom: 1px solid #f4f4f4;*/
  }

  .myOrder .mint-cell-title {
    font-size: 24px;
    color: #000;
  }

  .myOrder .mint-cell-value {
    font-size: 20px;
    color: #51515b;
  }

  .pinOrder .mint-cell {
    height: 70px;
    /*border-bottom: 1px solid #f4f4f4;*/
  }

  .pinOrder .mint-cell-title {
    font-size: 24px;
    color: #000;
  }

  .pinOrder .mint-cell-value {
    font-size: 20px;
    color: #51515b;
  }

  .bottom .mint-cell-text {
    margin-left: 20px;
  }

  .myOrder .mint-cell-wrapper {
    background-image: none;
  }

  .mint-cell-wrapper {
    background-image: none;
  }

  .bottom .mint-cell {
    /*height: 96px;*/
    border-bottom: 1px solid #f4f4f4;
  }
</style>
